<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.red-text{
				color: red;
			}
		</style>
	</head>
	<body>
		<div>
			点击按钮获得info.txt的文本数据(异步):<br>
			<button type="button" onclick="info1()">请求信息</button>
			<p>获得的信息：<span id="txt1" class="red-text"></span></p>
		</div><hr>
		<div>
			点击按钮获得info.txt的文本数据(同步):<br>
			<button type="button" onclick="info2()">获得信息</button>
			<p>获得的信息：<span id="txt2" class="red-text"></span></p>
		</div>
		<script>
			function info1() {
				let xhr = new XMLHttpRequest();
				xhr.open("GET", "info.txt", true); // true 表示异步请求
				xhr.send();
				xhr.onreadystatechange = function() {
					if (xhr.readyState == 4 && xhr.status == 200) {
						document.getElementById("txt1").innerHTML = xhr.responseText;
					}
				}
			}
			function info2() {
				let xhr = new XMLHttpRequest();
				xhr.open("GET", "info.txt", false); // false 表示同步请求
				xhr.send();
				document.getElementById("txt2").innerHTML = xhr.responseText;
			}
		</script>
	</body>
</html>
